import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Search, FileText, Download, Eye } from 'lucide-react';

const documents = [
  {
    id: 1,
    title: '用户手册.pdf',
    category: '文档',
    size: '2.4 MB',
    updated: '2025-10-01',
  },
  {
    id: 2,
    title: 'API文档.md',
    category: '技术',
    size: '156 KB',
    updated: '2025-10-05',
  },
  {
    id: 3,
    title: '产品规格说明.docx',
    category: '产品',
    size: '1.8 MB',
    updated: '2025-10-03',
  },
  {
    id: 4,
    title: '月度报告.xlsx',
    category: '报告',
    size: '3.2 MB',
    updated: '2025-10-08',
  },
  {
    id: 5,
    title: '设计指南.pdf',
    category: '设计',
    size: '5.6 MB',
    updated: '2025-09-28',
  },
];

export default function Documents() {
  return (
    <div className="space-y-6">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">文档管理</h1>
          <p className="text-muted-foreground">管理和查看系统文档</p>
        </div>
        <Button>
          <FileText className="mr-2 h-4 w-4" />
          上传文档
        </Button>
      </div>

      {/* Search bar */}
      <Card>
        <CardContent className="pt-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input placeholder="搜索文档..." className="pl-9" />
          </div>
        </CardContent>
      </Card>

      {/* Documents list */}
      <Card>
        <CardHeader>
          <CardTitle>文档列表</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {documents.map((doc) => (
              <div
                key={doc.id}
                className="flex items-center justify-between rounded-lg border p-4"
              >
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                    <FileText className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="font-medium">{doc.title}</p>
                    <p className="text-sm text-muted-foreground">
                      {doc.size} · 更新于 {doc.updated}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <Badge variant="secondary">{doc.category}</Badge>
                  <Button variant="ghost" size="icon">
                    <Eye className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Download className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

